<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <!-- 通过表单提交数据，action是提价的地址，提交的方式：get（默认）或post。提交后整个页面全部刷新 -->
    <!-- 现代的方式是ajax，页面局部刷新 -->
    <form action="#" onsubmit="submit1()" onreset="reset1()">
        <!-- 在输入框中敲回车 会提交表单 -->
        <input
            type="text"
            value="666"
            class="val1"
            name="kakaka"
            onfocus="focusing()"
            onblur="byebye()"
            onchange="changeVal()"
            oninput="changeVal11()"
        >
        <button type="submit">submit</button>
        <button type="reset">reset</button>
    </form>
    <script>
        var div1 = document.querySelector('.div1');
        var val1 = document.querySelector('.val1');
        div1.oncontextmenu = function () {
            console.log('卡了。。。。');
        }

        function focusing() {
            console.log('当世界聚焦于你');
        }

        function byebye() {
            console.log('失去焦点了');
        }
        function changeVal() {
            // change事件需要失去光标才会触发
            console.log('修改了 最新的值是' + val1.value);
        }
        function changeVal11() {
            // input更加灵敏，只要按下键盘 开始输入 就会触发
            console.log('11111修改了 最新的值是' + val1.value);
        }
        function submit1 () {
            console.log('表单提交了，提交给action对应的值');
        }
        function reset1 () {
            console.log('表单重置了，打回原形');
        }
    </script>
</body>

</html>